<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>采购单列表 - 仓库管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">
    <div class="hy-main">
        <!-- 不同部分 start -->

        <!-- start sp-wrapper -->
        <link rel="stylesheet" href="/sb/stock.css"/>
        <div class="sp-wrapper">
            <h2 class="sp-title"><a href="/stock_location/move_house">新增移库</a><a class="active">移库记录</a></h2>
            <div class="sp-tool">
                <span class="fl"><form action="/stock_location/move_house_list"><input type="text" name="moveNo" placeholder="输入单据编号查询"><input type="submit"
                                                                                                   value="查询"></form></span>
            </div>
            <div class="sp-table">
                <table>
                    <thead>
                    <tr>
                        <th>移库时间</th>
                        <th>单据编号</th>
                        <th>移出库位</th>
                        <th>移入库位</th>
                        <th>移库数量</th>
                        <th>操作人</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="list:${list}">
                        <td th:text="${#dates.format(list.createTime*1000, 'yyyy-MM-dd HH:mm:ss')}">2019-4-11 19:20:20</td>
                        <td th:text="${list.moveNo}">CG190411100335401</td>
                        <td th:text="${list.old_locationName+'-'+list.old_reservoirName+'-'+list.old_shelfName}">
                            深圳库-1区-01货架
                        </td>
                        <td th:text="${list.getNewlocationName()+'-'+list.getNewReservoirName()+'-'+list.newShelfName}">大朗总仓-1区-01货架</td>
                        <td th:text="${list.quantity}">2000</td>
                        <td th:text="${list.createBy}">张三</td>
                        <td><i class="detail" th:attr="data-id=${list.id}">详情</i><i class="print"
                                                                                    th:attr="data-id=${list.id}">打印</i>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-box layui-laypage layui-laypage-default pageBox">
                <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
            </div>
        </div>
        <script type="text/javascript" src="/sb/jquery.min.js"></script>
        <script type="text/javascript" src="/sb/Tips.min.js"></script>
        <style type="text/css">
            .record-box {
                position: relative;
                width: 900px;
                height: 550px;
                padding: 0 5px;
                font-size: 13px;
                color: #787878;
            }

            .check-box {
                position: relative;
                width: 900px;
                padding: 0 5px;
                font-size: 13px;
                color: #787878;
            }

            .record-head {
                margin: -20px 0 80px 0;
                height: 40px;
                line-height: 40px;
                font-size: 13px;
            }

            .record-head span {
                float: left;
            }

            .record-head i {
                float: right;
                font: normal 28px/30px Tahoma;
                cursor: pointer;
            }

            .record-code {
                position: absolute;
                left: 50%;
                top: 10px;
                margin-left: -110px;
                width: 220px;
                font-size: 14px;
                text-align: center;
            }

            .record-code img {
                width: 100%;
                display: block;
            }

            .record-code span {
                line-height: 2;
            }

            .record-info {
                line-height: 40px;
                overflow: hidden;
            }

            .record-info span {
                float: left;
                width: 18%;
                text-align: center;
            }

            .record-info span:nth-child(1) {
                width: 30%;
                text-align: left;
            }

            .record-info span:nth-child(5) {
                width: 16%;
                text-align: right;
            }

            .record-table {
                margin: 10px 0;
                max-height: 250px;
                overflow-y: auto;
            }

            .record-table table {
                width: 100%;
            }

            .record-table th, .record-table td {
                padding: 10px 0;
                font-size: 13px;
                text-align: center;
                border: 1px solid #787878;
            }

            .record-table th {
                padding: 5px 0;
            }

            .record-button {
                position: absolute;
                width: 100%;
                left: 0;
                bottom: 10px;
                text-align: center;
            }

            .record-button a {
                border: 1px solid #787878;
                padding: 10px 15px;
                font-size: 14px;
                color: #787878;
            }
        </style>
        <script type="text/template" id="tpl-1">
            <div class="check-box">
                <div class="record-info">
                    <span>单据编号：<i id="r-number">CG190411100335401</i></span>
                    <span>移库时间：<i id="r-time">2019-04-11</i></span>
                    <span>移库数量：<i id="r-count">2000</i></span>
                    <span>制单人：<i id="r-name">张三</i></span>
                </div>
                <div class="record-info">
                    <span>移出库位：<i id="r-out">深圳库-1区-01货架</i></span>
                    <span>移入库位：<i id="r-in">大朗总仓-1区-01货架</i></span>
                </div>
                <div class="record-table">
                    <table>
                        <thead>
                        <tr>
                            <th>SKU</th>
                            <th>商品</th>
                            <th>移库数量</th>
                        </tr>
                        </thead>
                        <tbody id="r-table">

                        </tbody>
                    </table>
                </div>
            </div>
        </script>
        <script type="text/javascript">
            $(function () {
                var res='[[${res}]]';
                if(res.length>0){
                    alert(res);
                }
                // 详情
                $('.detail').click(function () {
                    var id = $(this).attr('data-id');
                    // ..ajax 获取数据 完成后弹出
                    Tips.open({
                        title: '移库详情',
                        content: $('#tpl-1').html(),
                        render: function () {
                            // 处理数据 给模板中变量赋值
                            // ..
                            var dataObj = {"id": id};
                            $.ajax({
                                type: "POST",
                                url: "/ajax_stock/get_move_house_list",
                                data: JSON.stringify(dataObj),
                                dataType: 'json',
                                contentType: 'application/json',
                                success: function (data) {
                                    $("#r-number").text(data.data.moveNo);
                                    $("#r-time").text(data.data.dataTime);
                                    $("#r-count").text(data.data.quantity);
                                    $("#r-name").text(data.data.createBy);
                                    $("#r-out").text(data.data.old_locationName + "-" + data.data.old_reservoirName + "-" + data.data.old_shelfName);
                                    $("#r-in").text(data.data.newlocationName + "-" + data.data.newReservoirName + "-" + data.data.newShelfName);
                                    var str = "<tr>" +
                                        "<th >" + data.data.specNumber + "</th>" +
                                        "<th>" + data.data.goodsName + "_" + data.data.specName + "</th>" +
                                        "<th >" + data.data.quantity + "</th>" +
                                        "</tr>";
                                    $("#r-table").html(str);
                                }
                            });
                        }
                    });
                });
            });
            layui.use(['laydate', 'layer'], function () {
                var laydate = layui.laydate;
                var layer = layui.layer;
                //执行一个laydate实例
                $(".print").click(function () {
                    var id = $(this).attr("data-id");
                    console.log(id);
                    //iframe层
                    layer.open({
                        type: 2,
                        title: '打印移库单',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['940px', '90%'],
                        content: '/stock_location/get_move_house_list?id=' + id //iframe的url
                    });
                });
            });
        </script>
        <!-- end sp-wrapper -->
        <!-- 不同部分 end -->
    </div>
</div>
</body>
</html>
